<template>
  <view class="page">
    <view class="cu-custom" :style="[{ height: CustomBar + 'px' }]">
      <view class="cu-bar fixed bg-white" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' ,borderBottom:'1rpx solid #eee'}]">
       <!-- <view class="margin-left" @tap="handleClean" v-if="isEditor && isLogin && cartList.length != 0">{{i18n['清理下架商品']}}</view> -->
        <view class="action"></view>
        <view class="content" :style="[{ top: StatusBar + 'px' }]">
          {{i18n['购物车']}}
          <text style="display: none;">{{ allNumber }}</text>
        </view>
        <!-- #ifdef APP-PLUS || H5 -->
        <view class="margin-right fu-fs32 text-bold text-333" @tap="changeEditType" v-if="isLogin && cartList.length != 0">{{ isEditor ? i18n['完成'] : i18n['管理'] }}</view>
        <!-- #endif -->
      </view>
    </view>
     <!--  数据加载loadding  -->
    <template v-if="!isLogin">
      <view class="page-kong padding-tb">
        <view><image class="width-440 height-220" :src="imgWechatUrl+'/empty/cart.png'" mode="widthFix"></image></view>
        <view class="margin-top-xs text-sm text-999">{{i18n['您的购物车还没有商品，快去挑选吧']}}</view>
        <view class="cu-btn text-df margin-top" @click="navToLogin">{{i18n['去登录']}}</view>
      </view>
    </template>
    <template v-if="isLogin && cartList.length == 0">
      <view class="page-kong padding-tb">
        <view><image class="width-440 height-220" :src="imgWechatUrl+'empty/cart.png'" mode="widthFix"></image></view>
        <view class="margin-top-xs text-sm text-999">{{i18n['您的购物车还没有商品，快去挑选吧']}}</view>
        <view class="cu-btn text-df margin-top" @click="navToHome">{{i18n['去挑选好货']}}</view>
      </view>
    </template>
    <template v-if="isLogin && cartList.length != 0">
      <!-- #ifdef MP-WEIXIN -->
      <view class="tool-box text-right padding-sm" :style="{ top: CustomBar + 'px' }">
        <view class="cu-btn fu-fs32 text-bold text-333" @tap="changeEditType" v-if="isLogin && cartList.length != 0">{{ isEditor ? i18n['完成'] : i18n['管理'] }}</view>
      </view>
      <!-- #endif -->
      <view class="page-list ">
        <block v-for="(item, index) in cartList" :key="index">
          <view v-if="item.is_wholesale == 1" class="content-goods-list bg-white flex align-center ">
            <view @tap="check(item, index)">
              <checkbox v-if="isEditor" class="round theme" :class="item.delChecked ? 'checked' : ''" :checked="item.delChecked ? true : false"></checkbox>
              <checkbox
                v-if="!isEditor"
                class="round theme"
                :class="item.checked ? 'checked' : ''"
                :checked="item.checked ? true : false"
                :disabled="item.stock == 0 || item.is_valid == 1"
              ></checkbox>
            </view>
            <view class="goods-info flex align-center">
              <view class="wrap-image  img-150 radius bg-grey">
                <view class="box-kong text-df text-white" v-if="item.stock == 0"><view class="box-kong-item"><image :src="imgWechatUrl+'/cart/sellOut.png'" /></view></view>
                <view class="box-kong text-df text-white" v-if="item.is_valid == 1"><view class="box-kong-item"><image :src="imgWechatUrl+'/cart/shelf.png'" /></view></view>
                  <fu-image   :src="item.goods_thumb" mode="aspectFill" ></fu-image>
                <!-- <image class="radius" :src="item.goods_thumb" mode="aspectFill" @tap="toDetail(item, index)"></image> -->
              </view>
              <view class="goods-desc">
                <view>
                  <view class="text-df text-cut" @tap="toDetail(item, index)">{{ item.goods_name }}</view>
                  <view class="text-sm text-999 sku_name" v-if="item.sku_name">
                    <view class="text-cut width-250">
                      <text>{{ item.sku_name }}</text>
                    </view>
                  </view>
                </view>
                <view class="desc-number flex justify-between align-center">
                  <view class="fu-cred" @tap="toDetail(item, index)">
                    <text class="text-price text-df"></text>
                    <text class="text-xl">{{ item.curPrice }}</text>
                  </view>
                  <view class="number"><uni-number-box :min="1" :max="item.stock" :value="item.num" @change="numberChange($event, index)"></uni-number-box></view>
                </view>
              </view>
            </view>
          </view>
          <view v-else class="content-goods-list bg-white flex align-center ">
            <view @tap="check(item, index)">
              <checkbox
                v-if="isEditor"
                class="round theme"
                :class="item.delChecked ? 'checked' : ''"
                :checked="item.delChecked ? true : false"
              ></checkbox>
              <checkbox
                v-if="!isEditor"
                class="round theme"
                :class="item.checked ? 'checked' : ''"
                :checked="item.checked ? true : false"
                :disabled="item.stock == 0 || item.is_valid == 1"
              ></checkbox>
            </view>
            <view class="goods-info flex align-center">
              <view class="wrap-image  img-150 radius">
                <view class="box-kong text-df text-white" v-if="item.stock == 0"><view class="box-kong-item"><image :src="imgWechatUrl+'/cart/sellOut.png'" /></view></view>
                <view class="box-kong text-df text-white" v-if="item.is_valid == 1"><view class="box-kong-item"><image :src="imgWechatUrl+'/cart/shelf.png'" /></view></view>
                <fu-image :src="item.goods_thumb" mode="aspectFill"></fu-image>
              </view>
              <view class="goods-desc">
                <view>
                  <view class="text-df text-cut" @tap="toDetail(item, index)">{{ item.goods_name }}</view>
                  <view class="text-sm text-999 sku_name" v-if="item.sku_name" @tap="openPopup(item)">
                    <view class="text-cut width-250">
                      <text>{{ item.sku_name }}</text>
                    </view>
                    <view style="flex-shrink: 0;">
                      <text style="margin-right: 16rpx;">
                        {{i18n['选规格']}}
                      </text>
                      <text class="cuIcon-unfold lg text-gray"></text>
                    </view>
                  </view>
                </view>
                <view class="desc-number flex justify-between align-center">
                  <view class="text-lg text-prices" @tap="toDetail(item, index)">
                    <text class="text-price"></text>
                    <text>{{ item | filterGoodsPrice }}</text>
                  </view>
                  <view class="number"><uni-number-box :min="1" :max="item.stock" :value="item.num" @change="numberChange($event, index)"></uni-number-box></view>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
      <view class="action-bar cu-bar  bg-white flex justify-between">
        <view class="flex flex-sub align-center padding-lr  justify-between" style="max-width:calc(100% - 230rpx)">
          <view class="flex justify-between align-center" @tap="checkAll">
            <checkbox v-if="isEditor" class="round theme" :class="delAllChecked ? 'checked' : ''" :checked="delAllChecked ? true : false"></checkbox>
            <checkbox v-if="!isEditor" class="round theme aaaaa" :class="allChecked ? 'checked' : ''" :checked="allChecked ? true : false"></checkbox>
            <text class="margin-left-sm text-df text-333">{{i18n['全选']}}</text>
          </view>
          <view class="margin-left-sm text-df text-666" v-if="!isEditor">
            <view>
             {{ i18n['合计']}}:
              <text class="text-price text-prices text-lg">{{ totalPrice }}</text>
            </view>
          </view>
        </view>
        <button v-if="!isEditor" class="cu-btn btn-settlement bg-theme text-white lg " @click="createOrder">
          {{i18n['去结算']}}({{ totalNumber }})
        </button>
        <button
          v-if="isEditor"
          class="cu-btn btn-gray margin-right-sm"
          @click="handleTransfer"
        >
        {{i18n['移入收藏']}}
        </button>
        <button
          v-if="isEditor"
          class="cu-btn btn-gray margin-right-sm"
          @click="del"
        >
        {{i18n['删除']}}
        </button>
      </view>
    </template>
    <!-- 为你推荐 -->
    <view style="margin-top: 16rpx;">
      <fu-waterflow ref="guess" :isCart="isCart"></fu-waterflow>
    </view>
    <!-- 断网检测 -->
    <fu-notwork></fu-notwork>
    <!-- 规格弹窗 -->
    <fu-specs-popup
      ref="specs"
      :speclist="spec_list"
      :skulist="sku_list"
      :currentId="sku_id"
      :info="goodsInfo"
      :isCart="isCart"
      @confirmChange="confirmChange"
      @changeSpec="setSpec"
    ></fu-specs-popup>
  </view>
</template>

<script>
import richText from '@/common/utils/richText.js';
import fuSpecsPopup from '../../components/fu-specs-popup/index.vue';
export default {
  components: {
    fuSpecsPopup,
  },
  data() {
    return {
      //选择规格
			imgWechatUrl: this.imgWechatUrl,
      select_id: '',
      goodsInfo: {}, // 商品信息
      spec_list: [], // 规格列表
      sku_list: [], // 规格参照列表
      sku_id: 0, // 当前规格id
      isCart: true,
      getChangeValue: {},
      tableList: [], //商品推荐
      isShowLoading: true,
      CustomBar: this.CustomBar,
      StatusBar: this.StatusBar,
      isEditor: false, // 管理 or 完成
      options: [
        {
          text: global.i18n['删除'],
          style: {
            backgroundColor: this.$store.state.themeColor
          }
        }
      ],
      cartList: [], // 购物车列表
      checkedCache: [], // 上一次缓存的选中状态
      loading: false
    };
  },
  computed: {
    isLogin(){
      return this.$store.getters.isLogin;
    },
    // 是否会员
    isMember() {
      return this.$store.getters.isMember;
    },
    // 选择的商品总价
    totalPrice() {
      let list = this.cartList;
      let total = 0;
      list.forEach(item => {
        if (item.checked == true) {
          let _price;
          if (item.is_wholesale == 1) {
            _price = item.curPrice;
          } else {
            _price = this.isMember ? item.member_price : item.shop_price;
          }
          total += Number(_price) * Number(item.num);
        }
      });
      return Number(total.toFixed(2));
    },
    // 选择的商品数量
    totalNumber() {
      let list = this.cartList;
      let total = 0;
      list.forEach(item => {
        if (item.checked == true) {
          total += Number(item.num);
        }
      });
      return total;
    },
    // 购物车内的商品数量
    allNumber() {
      console.log('allNumber', this.cartList);
      let list = this.cartList;
      let total = 0;
      list.forEach(item => {
        total += Number(item.num);
      });
      return total;
    },
    // 管理模式全选状态
    delAllChecked() {
      let list = this.cartList;
      let bool = true;
      list.forEach(item => {
        // if(item.stock == 0) return ;
        if (item.delChecked == false) {
          bool = false;
        }
      });
      return bool;
    },
    // 正常模式全选状态
    allChecked() {
      let list = this.cartList;
      let bool = true;
      list.forEach(item => {
        if(item.stock == 0) return ;
        if(item.is_valid == 1) return ;
        if (item.checked == false) {
          bool = false;
        }
      });
      return bool;
    }
  },
  onPullDownRefresh() {
    if (global.token) {
      this.getCartData(true);
    } else {
      uni.stopPullDownRefresh();
    }
    this.$refs.guess && this.$refs.guess.refresh();
  },
  onReachBottom(e) {
    this.$refs.guess && this.$refs.guess.loadData();
  },
  onShow() {
    if (global.token) {
      this.getCartData();
      // this.isLogin = true;
    } else {
      // this.isLogin = false;
    }
    this.isEditor = false;
    this.$store.dispatch('getCartList');
    this.setTabBarItem();
		// 入仓
		// this.setTabBarItem1();
  },
  onLoad() {
    this.$nextTick(() => {
      this.$refs.guess && this.$refs.guess.refresh();
    });
    uni.$on('updateCart', () => {
      this.getCartData();
    });
    uni.$on('delCartGoods', data => {
      // 删除已买商品
      console.log('删除的ids', data);
      this.delCartGoods(data);
    });
  },
  onUnload() {
    uni.$off('updateCart');
    uni.$off('delCartGoods');
  },
  methods: {
    // 获取购物车数据
    getCartData(value) {
      if (!value) {
        this.isShowLoading = true;
      }
      this.$api
        .post(global.apiUrls.getCartList)
        .then(res => {
          // this.loading = false;
          this.isShowLoading = false;
          if (res.data.code == 1) {
            console.log('cart', res.data);
            let data = res.data.data.map(item => {
              // 批发商品展示价格计算
              if (item.is_wholesale == 1) {
                item.curPrice = this.computedCurPrice(item.shop_price, item.batch_data, item.num);
              }
              return item;
            });
            this.initCheckedType(data);
          }
          uni.stopPullDownRefresh();
        })
        .catch(err => {
          // this.loading = false;
          uni.stopPullDownRefresh();
          this.isShowLoading = false;
        });
    },
    // 初始化购物车商品选中状态
    initCheckedType(list) {
      list.forEach(item => {
        item.show = false;
        // 判断是否是选中状态
        if (this.checkedCache.includes(item.id)) {
          item.checked = false;
        } else {
          item.checked = false;
        }
        item.delChecked = false;
      });
      this.cartList = list;
      this.$forceUpdate();
    },
    // 判断是否是选中状态
    isChecked(id) {
      return this.checkedCache.includes(id);
    },
    // 缓存购物车选中状态 记录ids
    cacheCartChecked() {
      let ids = this.cartList.filter(item => {
        return item.checked === true;
      });
      let arr = [];
      ids.forEach(item => {
        arr.push(item.id);
      });
      uni.setStorageSync('cart_checked_cache', arr);
    },
    // 获取购物车选中状态
    getCartChecked() {
      let cache = uni.getStorageSync('cart_checked_cache');
      this.checkedCache = cache || [];
    },
    // 点击导航管理按钮
    changeEditType() {
      if (!this.isLogin) {
        return;
      }
      let _text = '';
      this.isEditor = !this.isEditor;
      if (!this.isEditor) {
        _text = this.i18n['管理'];
      } else {
        console.log('管理状态');
        _text =this.i18n['完成'];
        this.cartList.forEach(item => {
          item.delChecked = true;
        });
      }
    },
    // 删除购物车
    delFromCart(ids) {
      this.$util.showModal({
        title: this.i18n['提示'],
        content: this.i18n['确认删除吗']+'?',
        success: res => {
          if (res.confirm) {
            this.delCartGoods(ids);
          }
        }
      });
    },
    //
    delCartGoods(ids) {
      this.$api
        .post(global.apiUrls.delCart, {
          cart_ids: ids
        })
        .then(res => {
          console.log('res: ' + JSON.stringify(res));
          this.getCartData();
          this.$store.dispatch('getCartList');
        })
        .catch(err => {
          console.log('err: ' + JSON.stringify(err));
        });
    },
    // 商品选中状态处理
    check(item, i) {
      if (this.isEditor) {
        item.delChecked = !item.delChecked;
      } else {
        if (item.stock == 0) return this.$message.info(this.i18n['该商品已售完,正在采购中']);
        if (item.is_valid == 1) return this.$message.info(this.i18n['该商品已下架']);
        this.cartList[i].checked = !this.cartList[i].checked;
        this.cacheCartChecked();
      }
    },
    checkfor() {
      //选中状态，页面关闭的时候全部为false
      let _type = false;
      this.cartList.forEach(item => {
        item.checked == false;
        item.delChecked == false;
      });
      this.allChecked = false;
      this.delAllChecked = false;
    },
    //全选|取消全选
    checkAll() {
      if (this.isEditor) {
        const bool = !this.delAllChecked;
				console.log('isEditor',bool)
        this.cartList.forEach(item => {
          item.delChecked = bool;
        });
      } else {
        const bool = !this.allChecked;
				console.log('unEditor',bool)
        this.cartList.forEach(item => {
          if (item.is_valid == 0 && item.stock != 0) {
            item.checked = bool;
          }
        });
      }
    },
    //数量改变
    numberChange(e, index) {
      console.log('数量改变数量改变数量改变',e)
      let item = JSON.parse(JSON.stringify(this.cartList[index]));
      if (item.is_wholesale == 1) {
        let _price = this.computedCurPrice(item.shop_price, item.batch_data, e);
        this.cartList[index].curPrice = _price;
      }
      this.$api
        .post(global.apiUrls.postSetCartNumber, {
          cart_id: item.id,
          sku_id: item.sku_id,
          num: e
        })
        .then(res => {
          console.log('cart number', res.data);
          if (res.data.code == 1) {
            this.$set(this.cartList[index], 'num', e);
            this.$store.dispatch('getCartList');
          }
        });
      console.log(this.cartList[index]);
    },
    // 计算批发商品当前数量所使用的的价格
    computedCurPrice(shop_price, batch_data, num) {
      let arr = JSON.parse(JSON.stringify(batch_data)).reverse();
      let whole = arr.find(ele => Number(ele.start_batch) <= Number(num));
      let price = 0;
      if (whole) {
        return Number(whole.trade_price).toFixed(2);
      } else {
        return Number(shop_price).toFixed(2);
      }
    },
    // 删除商品
    del() {
      const list = this.cartList;
      let ids = [];
      list.forEach(item => {
        if (item.delChecked) {
          ids.push(item.id);
        }
      });
      console.log(ids, '???');
      if (ids.length == 0) return this.$message.info(this.i18n['未选择商品']);
      this.delFromCart(ids.join(','));
    },
    //移入收藏卡
    handleTransfer() {
      const list = this.cartList;
      let ids = [];
      list.forEach(item => {
        if (item.delChecked) {
          ids.push(item.id);
        }
      });
      console.log(ids, '???');
      if (ids.length == 0) return this.$message.info(this.i18n['请选择要移动商品']);
      this.transFromCart(ids.join(','));
    },
    // 移入收藏卡
    transFromCart(ids) {
      this.$util.showModal({
        title: this.i18n['提示'],
        content: this.i18n['确认移入收藏夹吗']+'?',
        success: res => {
          if (res.confirm) {
            this.transCartGoods(ids);
          }
        }
      });
    },
    //确定要移入
    transCartGoods(ids) {
      this.$api
        .post(global.apiUrls.removeGoodCart, {
          cart_ids: ids
        })
        .then(res => {
          console.log('res: ' + JSON.stringify(res));
          this.getCartData();
          this.$store.dispatch('getCartList');
        })
        .catch(err => {
          console.log('err: ' + JSON.stringify(err));
        });
    },
    //
    // 创建订单
    createOrder() {
      const list = this.cartList;
      let ids = [];
      list.forEach(item => {
        if (item.checked) {
          ids.push(item.id);
        }
      });
      const cart_ids = ids.join(',');
      if (cart_ids == '') return this.$message.info(this.i18n['请选择商品']);
      this.$api
        .post(global.apiUrls.check_goods_num, {
          cart_ids: ids
        })
        .then(res => {
          console.log('检测商品库存', res.data);
          if (res.data.code == 1) {
            this.$urouter.navigateTo({
              url: '/pages/order/order-process/confirm-order/index',
              params: {
                type: 'cart',
                ids: cart_ids
              }
            });
          } else {
            this.$message.info(res.data.msg);
          }
        });
    },
    // 去商品详情
    toDetail(item) {
      if (item.is_valid == 1) return this.$message.info(this.i18n['该商品已下架']);
      if (item.is_wholesale == 1) {
        this.$urouter.navigateTo({
          url: '/pages/activity/wholesale/wholesale-detail/index',
          params: {
            goods_id: item.goods_id,
            sku_id: item.sku_id
          }
        });
      } else {
        this.$urouter.navigateTo({
          url: '/pages/goods/goodsdetail/goods-detail/index',
          params: {
            goods_id: item.goods_id,
            sku_id: item.sku_id
          }
        });
      }
    },
    // 去登陆
    navToLogin() {
      this.$util.navigateToLogin();
      // this.$util.debounce(this.$util.navigateToLogin,200);
    },
    // 去首页
    navToHome() {
      this.$urouter.switchTab('/pages/tab/home/shopindex/index');
    },
    //清理下架产品
    handleClearn() {
      this.$api
        .post(global.apiUrls.cleanUpGoodCart, {
          cart_ids: ids
        })
        .then(res => {
          console.log('res: ' + JSON.stringify(res));
          this.getCartData();
          this.$store.dispatch('getCartList');
        })
        .catch(err => {
          console.log('err: ' + JSON.stringify(err));
        });
    },
    //选择清理下架产品
    handleClean() {
      const list = this.cartList;
      let ids = [];
      let is_shelves = [];
      list.forEach(item => {
        if (item.delChecked) {
          ids.push(item.id);
        }
        console.log(item, 4444);
        if (item.delChecked && item.is_valid == 0) {
          is_shelves.push(item.id);
        }
      });

      if (ids.length == 0) return this.$message.info(this.i18n['请选择要移除下架商品']);
      if (is_shelves.length > 0) {
        this.$message.info(this.i18n['所选商品包含正常销售商品,请检查']);
        return;
      }

      this.cleanFromCart(ids.join(','));
    },
    // 提示清理下架产品
    cleanFromCart(ids) {
      this.$util.showModal({
        title: this.i18n['提示'],
        content: this.i18n['确认移除所选商品吗']+'?',
        success: res => {
          if (res.confirm) {
            this.cleanCartGoods(ids);
          }
        }
      });
    },
    //清理下架
    cleanCartGoods(ids) {
      this.$api
        .post(global.apiUrls.cleanUpGoodCart, {
          cart_ids: ids
        })
        .then(res => {
          console.log('res: ' + JSON.stringify(res));
          this.getCartData();
          this.$store.dispatch('getCartList');
        })
        .catch(err => {
          console.log('err: ' + JSON.stringify(err));
        });
    },

    //打开规格
    // openPopup(type) {
    //   this.$refs['specs'].open();
    // },
    // 获取商品详情
    openPopup(item) {
      if (item.is_valid == 1) {
        return;
      }
      console.log(item, 999);
      this.select_id = item.id;
      this.sku_id = item.sku_id;
      console.log('sku_id', this.sku_id);
      this.$api
        .get(global.apiUrls.getGoodsDetail, {
          goods_id: item.goods_id,
          user_id: (global.userInfo && global.userInfo.id) || 0
        })
        .then(res => {
          if (res.data.code == 1) {
            console.log('goods detail', res.data.data);
            let data = res.data.data;
            this.swipers = data.images;
            this.goodsInfo = {
              name: data.name,
              price: data.shop_price,
              market_price: data.market_price,
              discounts: data.discounts || 0.0,
              thumb: data.thumb,
              description: data.description,
              is_collect: data.is_collect,
              share_award_money: data.share_award_money || 0.0,
              number: 1,
              stock: data.stock || 0,
              totalStock: data.stock || 0,
              sales_sum: data.sales_sum,
              is_spec: data.is_spec
            };
            this.totalStock = data.stock;
            this.body = richText.format(data.body.trim());
            this.comment = data.comment || [];
            this.comment_total = data.comment_total || 0;
            if (data.is_spec == 1) {
              this.spec_list = data.spec_list.filter(item => item.spec_value.length != 0);
              this.sku_list = Object.values(data.sku_list)
                .map(item => {
                  item.sku_spec = item.key.split('_');
                  return item;
                })
                .filter(item => {
                  return item.stock > 0;
                });
            }
            this.$nextTick(() => {
              if (data.is_spec == 1) {
                this.$refs.specs.init();
              }
            });
          } else {
            this.$refs['specs'].close();
            setTimeout(() => {
              this.$message.info(this.i18n['获取商品规格失败']);
            }, 300);
          }
          const that = this;
          setTimeout(function() {
            that.$refs['specs'].init();
          }, 1);
          setTimeout(function() {
            that.$refs['specs'].open();
          }, 10);
        });
    },

    // 修改购买规格
    setSpec(skuInfo) {
      this.getChangeValue = skuInfo;
    },
    //确定改变规格
    confirmChange() {
      this.$api
        .post(global.apiUrls.changeSetGuiGe, {
          cart_id: this.select_id,
          sku_id: this.getChangeValue.sku_id,
          shop_price: this.getChangeValue.shop_price,
          sku_name: this.getChangeValue.key_name
        })
        .then(res => {
          if(res.data.code == 1){
            this.cartList.forEach(val=>{
              console.log(val)
              if(val.id == this.select_id){
                val.sku_name = this.getChangeValue.key_name;
                val.sku_id = this.getChangeValue.sku_id;
                val.shop_price = this.getChangeValue.shop_price;
                val.member_price = this.getChangeValue.member_price;
              }
            })
          }else{
            this.$message.info(res.data.msg);
          }
          // this.getCartData();
          // this.$store.dispatch('getCartList');
        })
        .catch(err => {});
    },
    // 设置tabbar角标
    setTabBarBadge(val) {
      if (val == 0) {
        uni.removeTabBarBadge({
          index: 2
        });
      } else {
        uni.setTabBarBadge({
          index: 2,
          text: val + ''
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f8f8f8;
  padding-bottom: 100rpx;
  padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

  .page-kong {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #999999;
    font-size: 28rpx;
    background: #FFFFFF;
    padding-bottom: 64rpx;
    .cu-btn {
      width: 280rpx;
      height: 64rpx;
      background: $bgtheme;
      border-radius: 36rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 64px;
      color: #FFFFFF;
    }
  }
}

.page-list {
  overflow: hidden;
  background: #FFFFFF;
  padding: 12rpx 0;
  box-sizing: border-box;
}

.content-goods-list {
  width: 100%;
  border-radius: 16rpx;
  overflow: hidden;
  // margin-top: 24rpx;
  padding: 0 32rpx;
  box-sizing: border-box;
}

.goods-info {

  padding: 20rpx 0;

  .goods-desc {
    width:406rpx;
    // flex: 1;
    min-width: 1px;
    min-height: 180rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.round {
  transform: scale(0.7);
}

.cu-bar {
  position: fixed !important;
  left: 0;
  bottom: 0;
  /* #ifdef H5 */
  bottom: 100 upx !important;
  /* #endif */
  height: 98rpx;
  z-index: 99;

  .action {
    flex: 1;
  }

  .action-btn {
    width: 250rpx;
    height: 100%;
    background: $bgtheme;
    color: #ffffff;
    font-size: 32rpx;
    line-height: 98rpx;
    text-align: center;
  }
}

.action-bar {
  position: fixed;
  // #ifdef H5
  bottom: 50px !important;
  // #endif
  // #ifndef H5
  bottom: 0 !important;
  // #endif
  width: 100%;
  z-index: 999;
}

.img-150 {
  width: 180rpx;
  min-width: 180rpx;
  height: 180rpx;
  min-height: 180rpx;
  border-radius:16rpx;
  overflow: hidden;
  margin:0 24rpx;
  image {
    width: 100%;
    height: 100%;
  }
}

.info {
  height: 30rpx;

  .info-title {
    width: 80rpx;
    line-height: 30rpx;
    text-align: center;
  }

  .info-number {
    width: 70rpx;
    line-height: 22rpx;
    text-align: center;
    border: 4rpx solid $theme;
    border-left: none;
  }
}

.wrap-image {
  position: relative;

  .box-kong {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 98;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 148rpx;
    height:148rpx;
    .box-kong-item {
      width: 96rpx;
      height: 96rpx;
    }
  }
}

.tool-box {
  position: sticky;
  z-index: 999;
  background: #f8f8f8;

  .cu-btn {
    width: 144rpx;
    height: 56rpx;
    border-radius: 56rpx;
    border: 2rpx solid rgba(191, 191, 191, 1);
    background: #fff;
    &.btn-gray{
      width: 200rpx;
      height: 72rpx;
      line-height: 72rpx;
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      background: #F6F6F6;
      border-radius: 44rpx;
    }
  }
}
.sku_name {
  display: flex;
  justify-content: space-between;
  background-color: #f8f8f8;
  height: 48rpx;
  line-height: 48rpx;
  padding: 0 16rpx;
  box-sizing: border-box;
  margin: 8rpx 0;
  border-radius: 8rpx;
}

.cu-btn {
  &.btn-gray{
    width: 200rpx;
    height: 72rpx;
    line-height: 72rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    background: #F6F6F6!important;
    border-radius: 44rpx;
  }
  &.btn-settlement{
    background: $bgtheme;
    min-width: 230rpx;
    height:100rpx;
    border-radius:0!important;
  }
}
</style>
